<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen"
	href="/i-webmonitor/application/resources/css/sunny/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="/i-webmonitor/application/resources/css/ui.jqgrid.css" />

<style>
html,body {
	margin: 0;
	padding: 0;
	font-size: 75%;
}

.horizontal {
	float: left;
	list-style: none;
	margin: 10px;
}

.highlight {
	background-color: yellow;
}

.large{
	background-color: red;
}
.hover{
cursor:pointer;
}
#draggable { width: 150px; height: 150px; padding: 0.5em; }

</style>

<script src="/i-webmonitor/application/resources/js/jquery-1.8.0.min.js"
	type="text/javascript"></script>
	<script src="/i-webmonitor/application/resources/js/jquery-ui-1.8.23.custom.min.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/i18n/grid.locale-en.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/jquery.jqGrid.min.js"
	type="text/javascript"></script>
<script type="text/javascript">







$(document).ready( function(){
	   // Create JSON data locally   
	   var myData= [
		<?php foreach ($job_template as $job): ?>
	       { id: "<?php echo $job['id'] ?>", url: "<?php echo $job['url'] ?>" },	      
	   	<?php endforeach ?>
	    ];

	   $grid= $("#list");      
	   $grid.jqGrid({       
	       data: myData,
	       datatype: "local", // Set datatype to detect json data locally
	       colNames:['id','url'],
	       colModel:[
	           {name:'id',index:'id', width:55},
	           {name:'url',index:'url', width:390},
	       ],
	       rowNum: 4,
	       rowList:[10,20],
	       pager: '#pager',
	       sortname: 'name',
	       viewrecords: true,
	       sortorder: "asc",
	       caption:"JSON Example"
	   })
	   $grid.jqGrid('navGrid','#pager',{edit:true,add:true,del:true});

	   $('#selected-plays > li').addClass('horizontal');
	   $('li:contains("1")').siblings().addClass('highlight');

	   
	   $('#switcher-large').bind('click',function(){
		   $('#switcher').addClass('large').addClass('hover');	
		      
	   });
		
	  
	   $('#para').bind('click',function(){
		   $('#switcher')
		   .fadeTo('slow',0.5)
		   .animate({height:38},'slow')
		   .fadeTo('slow',1.0, function(){
		   $(this).css('backgroundColor','#f00');
		   });		   
	   });

	   $('#json').click(function(){
		   $.getJSON('application/resources/data/test.json',function(data){
	   });
	   });
	   $('#draggable').draggable({helper: "clone"});
	  
	});

</script>
</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

</div><!-- End demo -->

<table width="300" id="list"></table>
<div id="pager"></div>




<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-normal">Normal</div>
<div class="button" id="switcher-narrow">Narrow</div>
<div class="button" id="switcher-large">Large</div>
</div>
<div id="json">Json Test</div>
<div id="para">
<ul id="selected-plays">
	<li>Comedies
	<ul>
		<li>Comedies 1</li>
		<li>Comedies 2</li>
		<li>Comedies 3</li>
		<li>Comedies 4</li>
	</ul>
	</li>
	<li>Tragedies
	<ul>
		<li>Tragedies 1</li>
		<li>Tragedies 2</li>
		<li>Tragedies 3</li>
	</ul>
	</li>
	<li>Histories
	<ul>
		<li>Histories 1</li>
		<li>
		<ul>
			<li>Part 1</li>
			<li>Part 2</li>
		</ul>
		<ul>
			<li>T 1</li>
			<li>T 2</li>
		</ul>
		</li>
		<li>Histories 2</li>
		<li>Histories 3</li>
	</ul>
	</li>
</ul>
</div>
</body>
</html>
